<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    a{
        text-decoration: none;
    }
    .headerBox {
        width: 100%;
        height: 100px;
        background-color: slateblue;
        display: flex;
        justify-content: center;
    }

    .header {
        width: 70%;
        height: 100px;
        display: flex;
        flex-wrap: nowrap;
    }

    .leftHeaderBox {
        width: 25%;
        height: 100px;
        display: flex;
        align-items: center;
    }

    .headerLogo {
        width: 100px;
        height: 100px;
    }

    .headerTextStyle {
        text-decoration: none;
        color: white;
        font-size: 30px;
    }

    .middleHeaderBox {
        width: 25%;
        height: 100px;
    }

    .rightHeaderBox {
        width: 50%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: white;
    }

    .searchBox {
        background-color: white;
        width: 300px;
        height: 50px;
        border-radius: 50px;
        border: 5px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>
<body>
<div style="display: flex; flex-direction: column;">
    <!--导航页-->
    <div class="headerBox">
        <div class="header">
            <div class="leftHeaderBox">
                <a href="index.html">
                    <img id="logoImage" class="headerLogo" src="../images/login-2.png">
                </a>
                <a href="index.html" class="headerTextStyle">疫时达</a>
            </div>
            <div class="middleHeaderBox">
            </div>
            <div class="rightHeaderBox">
                <div class="searchBox">
                    <input class="searchInput" type="text">
                    <a><i class="fa fa-search headerIconStyle" aria-hidden="true"></i></a>
                </div>
                <span style="width: 130px; margin-left: 20px">
                    <a class="headerTextStyle" th:href="@{/ourProject/login}">购物车</a>
                </span>
                <span style="width: 150px; margin-left: 20px">
                    <a class="headerTextStyle" href="register.html">个人信息</a>
                </span>
            </div>
        </div>
    </div>
</div>
</body>
</html>